<template>
  <div>
    <el-row>
      <el-col :span="24" style="padding: 0 40px 0px 40px;">
        <div>
          <h2>准备一张图片来测试自己的模型吧！</h2>
        </div>
        <el-card style="height: 480px;width: 480px;margin:0 auto;">
          <div>
            <span style="font-size: 18px;">模型测试</span>
          </div>
          <div class="showImg">
            <div >
              <img src="https://oktools.net/ph/438x350?t=上传测试图片会显示在这里" id="testImg" style="width: 438px; height: 350px; border-radius: 10px;">
            </div>
          </div>
          <div class="chooseImg">
            <input type="file" id="userFile" @change="handleSelect" hidden>
            <el-button  @click="triggerFileSelect" type="primary">选择测试图片</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <h2 style="float: right;padding-right: 200px;">
          <span >识别结果：{{result}}</span>
        </h2>
      </el-col>

    </el-row>
    <div style="display: none;">
      <canvas id="dst"></canvas>
    </div>
  </div>
</template>

<script>
import * as tf from "@tensorflow/tfjs";
const axios = require('axios');
import cv from "opencv4js";
export default {
  name: "ModelEvalute",
  data() {
    return {
      user_info:{
        id:"",
        nickname:""
      },
      rubbishName:[],
      result:''
    }
  },
  methods: {
    triggerFileSelect(){
      var btn = document.getElementById("userFile");
      btn.click();
    },
    handleSelect(){
      var file = document.getElementById('userFile').files[0];
      var img = document.getElementById('testImg');
      let _this = this;
      let reader = new FileReader();
      var model = {};
      reader.onloadend = function () {
        _this.showIndex = false;
        //showImgSrc是用户上传测试图片的绝对路径
        // _this.showImgSrc= this.result;
        img.src = this.result;
        predict();
        // window.model.predict();
      }
      reader.readAsDataURL(file);
      async function predict(source) {
        var img =await document.getElementById('testImg');
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [56,56]).toFloat()
        tf.print(imgTensor)
        let tensor = imgTensor.expandDims(0)
        const prediction = await window.model.predict(tf.div(tensor,255)).dataSync();
        console.log(prediction)
        var index;
        console.log(prediction.length);
        var element = prediction[0];
        for (var i = 0; i < prediction.length; i++) {
          if(prediction[i] >= element){
            element = prediction[i];
            index = i;
          }
        }
        //预测出来的类型下标
        // console.log(index);
        _this.$data.result = _this.$data.rubbishName[index];
        console.log(_this.$data.result);
      }
    }
  },
  mounted() {
    var _this=this
    getInfoAndModel();

    getLabel();
    async function getLabel(){
      await axios.get("http://192.168.31.103:2444/CatgCenter/getMyCategory").then(function(res){
        console.log(res)
        _this.$data.rubbishName=[res.data.catg_1, res.data.catg_2, res.data.catg_3, res.data.catg_4];
      });
    };


    async function getInfoAndModel(){
      await axios.get("http://192.168.31.103:2444/LoginCenter/getUserInfo").then(function(res){
        console.log(res)
        _this.$data.user_info.id=res.data.user_id;
        _this.$data.user_info.nickname=res.data.nickname;
        if(res.data=="") {
          _this.$router.push({path:"/login"})
          return;
        }
        else{
          _this.$data.user_info.id=res.data.user_id;
          _this.$data.user_info.nickname=res.data.nickname;
        }
      });
      const MODEL_URL = 'http://192.168.31.103:2444/'+_this.$data.user_info.id+'/model.json'
      const  loadModel = (async function () {
        window.model = await tf.loadLayersModel(MODEL_URL);
        window.model.summary()
      })
      loadModel().then(function(){
        console.log("加载完毕")
      });
    }
  }
}
</script>

<style scoped>

</style>
